<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:20px;">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/books' }">书籍管理</el-breadcrumb-item>
			<el-breadcrumb-item>{{ id == 'ADD' ? ' 新增' : ' 修改' }}书籍</el-breadcrumb-item>
		</el-breadcrumb>

		<el-form ref="form" :model="one" :rules="rules" label-width="80px">
			<el-form-item label="名称" prop="name">
				<el-col :span="11">
					<el-input v-model.trim="one.name"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="描述" prop="description">
				<el-col :span="11">
					<el-input v-model.trim="one.description" type="textarea"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="类别" prop="type">
				<CommSelect v-model="one.type" placeholder="请选择" data-url="../dict/type/DICT_OF_BOOK_TYPE"></CommSelect>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<CommSelect v-model="one.status" placeholder="请选择" data-url="../dict/type/DICT_OF_BOOK_STATUS"></CommSelect>
			</el-form-item>
			<el-form-item label="日期" prop="publishTime">
				<el-col :span="11">
					<el-date-picker type="datetime" v-model="one.publishTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
				</el-col>
			</el-form-item>
			<el-form-item label="所属单位" prop="deptName">
				<el-col :span="11">
					<el-input v-model="one.deptNo" v-show="false"></el-input>
					<el-input v-model="one.deptName" @focus="$refs.tree1.open()" :readonly="true"></el-input>
					<TreeSelect ref="tree1" dataUrl="../dict/type/DICT_OF_DEPT"
						@on_ok="one.deptNo = $event[0].id; one.deptName = $event[0].label;"
					></TreeSelect>
				</el-col>
			</el-form-item>
			<el-form-item>
				<span v-show="!added">
					<el-button type="primary" @click="onSubmit" :loading="loading">{{id == 'ADD' ? ' 新增 ' : ' 修改 '}}</el-button>
					<el-button @click="$router.go(-1)">{{saved ? '返回' : '取消'}}</el-button>
				</span>
				<span v-show="added">
					<el-button @click="$router.go(-1)">返回</el-button>
				</span>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import CommSelect from "./../comm/comm-select.vue";
import TreeSelect from "./../comm/comm-treeSelect.vue";
export default {
	components: { CommSelect, TreeSelect },
	data: function() {
		return {
			id: "",
			one: {deptNo:'', deptName:''},
			rules: {
				name: [
					{ required: true, message: "必填项", trigger: "change" },
					{ min: 3, max: 15, message: "长度在3-15之间", trigger: "change" }
				],
				publishTime: [{ required: true, message: "必填项", trigger: "change" }],
				type: [{ required: true, message: "必填项", trigger: "change" }],
				deptName: [{ required: true, message: "必填项", trigger: "change" }],
				status: [{ required: true, message: "必填项", trigger: "change" }]
			},
			added: false,
			loading: false,
			saved: false
		};
	},
	created: function() {
		var that = this;

		this.id = this.$route.params.id;

		if (this.id != "ADD") {
			// this.$axios.get("../book/one/" + this.id).then(response => {
			// 	that.one = response.data;
			// });
		}
	},
	methods: {
		onSubmit() {
			var that = this;
			this.$refs.form.validate(valid => {
				if (valid) {
					that.loading = true;
					if (that.id == "ADD") {
						this.$axios
							.post("../book/one", that.one)
							.then(response => {
								that.added = true;
								that.$message.success("新增成功");
								setTimeout(function(){
									that.$router.go(-1);
								}, 500);
							})
							.catch(result => {
								that.$message.warning(result.response.data);
							})
							.then(response => {
								that.loading = false;
							});
					} else {
						this.$axios
							.put("../book/one", that.one)
							.then(response => {
								that.saved = true;
								that.$message.success("修改成功");
								setTimeout(function(){
									that.$router.go(-1);
								}, 500);
							})
							.catch(result => {
								that.$message.warning(result.response.data);
							})
							.then(response => {
								that.loading = false;
							});
					}
				}
			});
		}
	}
};
</script>
<style scoped>
</style>

